<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/9/18
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台模板</title>


    <style>
        body
        {
            margin:0;
            padding: 0;
            font-family: sans-serif;
            background: url("/imgs/3.png");
            background-size: cover;
        }
        .box
        {
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:400px;
            padding: 40px;
            background: rgba(0,0,0,.8);
            box-sizing : border-box;
            box-shadow: 0 15px 25px rgba(0,0,0,.5);
            border-radius: 10px;
        }
        .box h2
        {
            margin:0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .box .inputBox
        {
            position: relative;
        }
        .box .inputBox input
        {
            width:100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }
        .box .inputBox label
        {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            letter-spacing: 1px;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }
        .box .inputBox input:focus ~ label,
        .box .inputBox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size: 12px;
        }
        .box input[type="submit"]
        {
            background: transparent;

            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function login(){
        var account = $.trim($("#account").val());
        var security = $.trim($("#security").val());
        if(account == ""){
            alert("请输入用户名");
            return false;
        }else if(security == ""){
            alert("请输入密码");
            return false;
        }
        //ajax去服务器端校验
        var data= {account:account,security:security};

        $.ajax({
            type:"POST",
            url:'back',
            data:data,
            dataType:'json',
            success:function(data){
                //alert(msg);
                if(data==null){
                    alert("没有这个用户！")
                }
                else{
                   window.location.href="/back/dashboard";

                }
            }
        });
    };
</script>

<div class="box">
    <h2>Login</h2>
    <form>
        <div class="inputBox">
            <input type="text" id="account" required="">
            <label>Username</label>
        </div>
        <div class="inputBox">
            <input type="password"  id="security" required="">
            <label>password</label>
        </div>
        <span id="error"></span>
        <input type="button" name="" value="Submit" onclick="login()" >
    </form>
</div>


</body>
</html>
